import { useEffect } from "react";
import { Popconfirm, Table } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";

const { Column } = Table;

const OffShelfPersonApplications = () => {
    const { windowInnerHeight } = useModel("global");

    const state = useReactive({
        loading: false,
        applications: [],
        page: 1,
        totalCount: 0,
        pageSize: 20,
    });

    const loadApplications = async () => {
        state.loading = true;
        state.loading = false;
    };

    useEffect(() => {
        loadApplications();
    }, []);

    const onShelf = async () => {};

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 15 }}>未上架个人应用</span>}
                headerExtraContent={
                    <ButtonGroup size={"default"} theme="borderless">
                        <Button icon={<IconRefresh />} onClick={loadApplications} />
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight }}
            >
                <Table loading={state.loading} dataSource={state.applications} rowKey="aiUuid" pagination={false} scroll={{ y: cardBodyHeight - 60 }}>
                    <Column title="应用名称" dataIndex="aiName" align="center" />
                    <Column title="登录状态" dataIndex="aiLogn" align="center" />
                    <Column title="适用对象" dataIndex="aiObje" align="center" />
                    <Column title="所属分类" dataIndex="aiClas" align="center" />
                    <Column title="所属组织" dataIndex="aiSdna" align="center" />
                    <Column title="数据依赖" dataIndex="aiScms" align="center" />
                    <Column
                        title="操作"
                        align="center"
                        width={80}
                        render={(_, r) => (
                            <Popconfirm title="确认下架吗？" placement="topRight" onConfirm={() => onShelf(r)}>
                                <a>上架</a>
                            </Popconfirm>
                        )}
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default OffShelfPersonApplications;
